<template>

  <div class="order-container">
    <D-search />

    <div class="order-list">
      <van-pull-refresh v-model="refreshLoading"
                        @refresh="onRefresh">

        <van-list v-model:loading="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad">
          <van-cell v-for="item in list"
                    :key="item.content"
                    @click="touch(item)"
                    :title="item.content" />
        </van-list>

      </van-pull-refresh>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  toRefs,
  inject,
  getCurrentInstance,
  onMounted,
} from 'vue'
import { useRouter } from 'vue-router'
import DSearch from './modules/Dsearch.vue'
import { state } from './state'
import { v4 as uuid4 } from 'uuid'

export default defineComponent({
  components: {
    DSearch,
  },
  setup() {
    const router = useRouter()
    const { ctx }: any = getCurrentInstance()

    const onback = inject('location', '1111')

    onMounted(() => {
      for (let index = 0; index < 10; index++) {
        const obj = {
          content: 'test',
          id: uuid4(),
        }
        state.list.push(obj)
      }
    })

    const methods = {
      touch(item: { id: any }): void {
        router.push({
          path: 'active',
          query: {
            id: item.id,
          },
        })
      },

      /**
       * @Description 下拉刷新
       * @date 2021-03-11
       * @returns {any}
       */
      onRefresh(): void {
        setTimeout(() => {
          ctx.$toast.fail('刷新成功')
          state.refreshLoading = false
        }, 1000)
      },

      /**
       * @Description 上拉加载
       * @date 2021-03-11
       * @returns {any}
       */
      onLoad(): void {
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            const obj = {
              content: 'test',
              id: uuid4(),
            }
            state.list.push(obj)
          }

          // 加载状态结束
          state.loading = false

          // 数据全部加载完成
          if (state.list.length >= 40) {
            state.finished = true
          }
        }, 1000)
      },
    }

    return {
      onback,
      ...toRefs(state),
      ...methods,
    }
  },
})
</script>

<style lang="less" scoped>
.order-container {
  position: relative;
  height: 100vh;
  .order-list {
    height: 100%;
  }
}
</style>